<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒子子元素属性</title>
		<style>
			.box{
				width: 800px;
				border: 1px red solid;
				/* 设置弹性盒子 */
				display: flex;
				/* 子元素自动换行 */
				/* flex-wrap: wrap; */
				
			}
			.itme{
				width: 100px;
				font-size: 50px;
				text-align: center;
				/* 设置所有子元素统一放大，填充满父元素宽度 */
				flex-grow: 1;
				flex-basis: 0;
				/* 简写设置放大缩小 */
				/* flex: 1; */
			}
			.box .itme:nth-child(1){
				background-color: red;
			}
			.box .itme:nth-child(2){ 
				background-color: yellow;
				/* 修改排列顺序 */
				order: 2;
			}
			.box .itme:nth-child(3){
				/* 初始长度 */
				/* flex-basis: 300px; */
				background-color: blue;
			}
			.box .itme:nth-child(4){
				background-color: black;
			}
			.box .itme:nth-child(5){
				background-color: aqua;
			}
			.box .itme:nth-child(6){
				background-color: bisque;
				/* 缩放单独的元素 */
				flex-grow: 2;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="itme">1</div>
			<div class="itme">2</div>
			<div class="itme">3</div>
			<div class="itme">4</div>
			<div class="itme">5</div>
			<div class="itme">6</div>
		</div>
	</body>
</html>